<!-- Based on Learn How To Build A Website In 1 Hour! by Kyle Cook - Web Dev Simplified (2019)
see: https://www.youtube.com/watch?v=RZ-Oe4_Ew7g -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Soundwave</title>
</head>
<body>
<div class="container full-height-grow">
<header class="main-header">
<a href="#" class="brand-logo">
<img src="https://i.ibb.co/yRkkT0M/logo.png" />
<h1 class="brand-logo-name">Soundwave</h1>
</a>
<nav class="main-nav">
<ul>
<li><a href="#discover">Discover</a></li>
<li><a href="#join">Join</a></li>
</ul>
</nav>
</header>
<!-- hero -->
<section class="hero-section">
<div class="img-wrapper">
<div class="lady-image"></div>
</div>
<div class="call-to-action">
<h1 class="title">Feel The Music</h1>
<span class="subtitle"
>Stream over 20 thousand songs with one click</span
>
<a href="#join" class="btn">Join Now</a>
</div>
</section>
<div class="hero-circle-1"></div>
<div class="hero-circle-2"></div>
<div class="hero-circle-3"></div>
</div>
<!-- discover -->
<div class="alternate-background">
<div class="container full-height-grow">
<section class="discover-section" id="discover">
<div class="call-to-action">
<h1 class="title">Discover new music</h1>
<div class="icon-section">
<div class="icon">
<svg
width="54"
height="54"
viewBox="0 0 54 54"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M34.9335 25.6703C32.5665 27.5648 17.0662 39.9758 13.4775 42.8513L7.40922 36.783L24.6622 15.399L34.9335 25.6703ZM46.8787 3.46952C42.255 -1.15423 34.7557 -1.15423 30.132 3.46952C27.0832 6.52052 26.8245 9.86402 26.676 11.0498L39.2985 23.6723C40.3875 23.5508 43.803 23.292 46.8787 20.2163C51.5047 15.5925 51.5047 8.09327 46.8787 3.46952ZM24.7522 43.8345C19.5952 43.8345 17.2395 47.0453 13.9162 49.1333C11.5627 50.6093 9.33522 49.86 8.26422 48.5348C7.87497 48.06 6.76347 46.35 8.65572 44.3903L8.37447 44.109L5.84097 41.6543C2.75397 44.8403 3.30072 48.6473 5.21322 51.0075C7.40697 53.7165 11.8192 55.0845 16.002 52.4588C19.5682 50.22 21.1477 47.7608 24.7522 47.7608C27.0832 47.7608 29.2072 48.8048 32.5935 54L35.8807 51.858C32.7465 47.043 29.6527 43.8345 24.7522 43.8345Z"
fill="#EAEAEA"
/>
</svg>
Charts
</div>
<div class="icon">
<svg
width="57"
height="54"
viewBox="0 0 57 54"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0)">
<path
d="M50.8205 23.9805L56 27L28.9955 42.75L2 27L7.17725 23.9805L28.9955 36.711L50.8205 23.9805ZM28.9955 47.9588L7.17725 35.2282L2 38.25L28.9955 54L56 38.25L50.8205 35.2305L28.9955 47.9588ZM56 15.75L28.9955 0L2 15.75L28.9955 31.5L56 15.75Z"
fill="#EAEAEA"
/>
</g>
<defs>
<clipPath id="clip0">
<rect
width="54"
height="54"
fill="white"
transform="translate(2)"
/>
</clipPath>
</defs>
</svg>
Albums
</div>
<div class="icon">
<svg
width="56"
height="54"
viewBox="0 0 56 54"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0)">
<g clip-path="url(#clip1)">
<path
d="M28.0072 4.5C40.5922 4.5 50.8309 14.5935 50.8309 27C50.8309 39.4065 40.5922 49.5 28.0072 49.5C15.4222 49.5 5.18346 39.4065 5.18346 27C5.18346 14.5935 15.4222 4.5 28.0072 4.5ZM28.0072 0C12.8819 0 0.618713 12.0893 0.618713 27C0.618713 41.9108 12.8819 54 28.0072 54C43.1325 54 55.3957 41.9108 55.3957 27C55.3957 12.0893 43.1325 0 28.0072 0ZM32.572 27L22.3013 37.125L25.7865 40.5L39.4191 27L25.7865 13.5L22.3013 16.875L32.572 27Z"
fill="#EAEAEA"
/>
</g>
</g>
<defs>
<clipPath id="clip0">
<rect
width="54.777"
height="54"
fill="white"
transform="translate(0.618713)"
/>
</clipPath>
<clipPath id="clip1">
<rect
width="54.777"
height="54"
fill="white"
transform="translate(0.618713)"
/>
</clipPath>
</defs>
</svg>
More
</div>
</div>
By joining you can enjoy the latest albums released.
</div>
<img class="covers-image" src="https://i.ibb.co/Q8248V3/covers.jpg" />
</section>
</div>
</div>
<!-- join -->
<div class="circles">
<div class="container full-height-grow">
<section class="join-section" id="join">
<h1 class="join-text">
Join the
<span class="accent-text">fun.</span>
</h1>
<form class="join-form">
<div class="input-group">
<label>Name</label>
<input type="text" />
</div>
<div class="input-group">
<label>Email</label>
<input type="email" />
</div>
<div class="input-group">
<label>Password</label>
<input type="password" />
</div>
<div class="input-group">
<button type="submit" class="btn">Join Now</button>
</div>
</form>
</section>
</div>
<div class="join-circle-1"></div>
<div class="join-circle-2"></div>
</div>
<!-- footer -->
<footer class="main-footer">
<div class="container">
<nav class="footer-nav">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<nav class="footer-nav">
<ul>
<li>
<a href="#" class="social-link">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0)">
<path
d="M24 4.55705C23.117 4.94905 22.168 5.21305 21.172 5.33205C22.189 4.72305 22.97 3.75805 23.337 2.60805C22.386 3.17205 21.332 3.58205 20.21 3.80305C19.313 2.84605 18.032 2.24805 16.616 2.24805C13.437 2.24805 11.101 5.21405 11.819 8.29305C7.728 8.08805 4.1 6.12805 1.671 3.14905C0.381 5.36205 1.002 8.25705 3.194 9.72305C2.388 9.69705 1.628 9.47605 0.965 9.10705C0.911 11.388 2.546 13.522 4.914 13.997C4.221 14.185 3.462 14.229 2.69 14.081C3.316 16.037 5.134 17.46 7.29 17.5C5.22 19.123 2.612 19.848 0 19.54C2.179 20.937 4.768 21.752 7.548 21.752C16.69 21.752 21.855 14.031 21.543 7.10605C22.505 6.41105 23.34 5.54405 24 4.55705Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
Twitter
</a>
</li>
<li>
<a href="#" class="social-link">
<svg
width="24"
height="22"
viewBox="0 0 24 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0)">
<path
d="M22.675 0H1.325C0.593 0 0 0.543583 0 1.21458V20.7863C0 21.4564 0.593 22 1.325 22H12.82V13.4805H9.692V10.1603H12.82V7.71192C12.82 4.87025 14.713 3.32292 17.479 3.32292C18.804 3.32292 19.942 3.41367 20.274 3.454V6.424L18.356 6.42492C16.852 6.42492 16.561 7.08033 16.561 8.041V10.1613H20.148L19.681 13.4814H16.561V22H22.677C23.407 22 24 21.4564 24 20.7854V1.21458C24 0.543583 23.407 0 22.675 0V0Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0">
<rect width="24" height="22" fill="white" />
</clipPath>
</defs>
</svg>
Facebook
</a>
</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>